<template>
    <div>
       <el-form :model='formData' ref="form" :rules='rules'>

           <!-- baseInfo start -->
           <div class='pane'>
               <el-row :gutter="20">
                   <h2 class='title'>基本信息</h2>
                   <el-col :span='8'>
                       <el-form-item label="基地名称：">
                           <el-select class='formClass' v-model="baseName" @change='baseChange'>
                               <el-option v-for='(item,i) in base' :key='i' :label="item.name" :value="item.id"></el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item v-show='showInputs' label="基地成员：" prop='member'>
                           <el-input class='formClass' v-model="formData.member" placeholder="请输入"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span='8' v-show='showInputs'>
                       <el-form-item label="基地编号：" prop='num'>
                           <el-input class='formClass' v-model="formData.num"></el-input>
                       </el-form-item>
                       <el-form-item label="面积：" prop='area'>
                           <el-input class='formClass' v-model="formData.area">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>亩</span>
                               </template>
                           </el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span='8' v-show='showInputs'>
                       <el-form-item label="基地负责人：" prop='principalName'>
                           <el-input class='formClass' v-model="formData.principalName" filterable placeholder="请输入"></el-input>
                       </el-form-item>
                       <el-form-item label="所在地区：" prop='address'>
                           <el-cascader
                               class='formClass'
                               v-model="formData.address"
                               :options="addressOptions"
                               :props='{value: "name", label: "name", children: "children"}'
                               @change="handleChange"></el-cascader>
                       </el-form-item>
                   </el-col>
               </el-row>
               <el-row v-show='showInputs'>
                   <el-col :span='24'>
                       <el-form-item label="详细地址：" prop='detailAddress'>
                           <el-input v-model='formData.detailAddress' placeholder='详细地址' class='formClass'></el-input>
                       </el-form-item>
                   </el-col>
               </el-row>
           </div>
           <!-- baseInfo end -->

           <!-- baseUpload start -->
           <div class='pane' v-show='showInputs'>
               <el-row :gutter="20">
                   <h2 class='title'>基地图片资料</h2>
                   <el-col :span='12'>
                       <el-form-item label="基地照片：">
                           <myUpload :max-num='1' :fileList='fileListBasePhoto' :files='formData.soilImg' @getUpload='getImgUrl($event,"soilImg")'></myUpload>
                       </el-form-item>
                   </el-col>
                   <el-col :span='12'>
                       <el-form-item label="基地资料：">
                           <myUpload  :max-num='1' :fileList='fileListBaseLicense' :files='formData.certificateImg' @getUpload='getImgUrl($event,"certificateImg")'></myUpload>
                       </el-form-item>
                   </el-col>
               </el-row>
           </div>
           <!-- baseUpload end -->

           <!-- envInfo start -->
           <div class='pane' v-show='showInputs'>
               <el-row :gutter="20">
                   <h2 class='title'>环境信息</h2>
                   <el-col :span='8'>
                       <el-form-item label="海拔：">
                           <el-input type='number' class='formClass' v-model="formData.altitude">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>米</span>
                               </template>
                           </el-input>
                       </el-form-item>
                       <el-form-item label="无霜期：">
                           <el-input type='number' class='formClass' v-model="formData.dryPeriod">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>天</span>
                               </template>
                           </el-input>
                       </el-form-item>
                       <el-form-item label="年平均气温：">
                           <el-input type='number' class='formClass' v-model="formData.yearAvgTemp">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>℃</span>
                               </template>
                           </el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span='8'>
                       <el-form-item label="经度：">
                           <el-input class='formClass' v-model="formData.longitude"></el-input>
                       </el-form-item>
                       <el-form-item label="积温：">
                           <el-input type='number' class='formClass' v-model="formData.integralTemp">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>℃</span>
                               </template>
                           </el-input>
                       </el-form-item>
                       <el-form-item label="年平均日照：">
                           <el-input type='number' class='formClass' v-model="formData.yearAvgSunshine">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>天</span>
                               </template>
                           </el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span='8'>
                       <el-form-item label="纬度：">
                           <el-input class='formClass' v-model="formData.latitude"></el-input>
                       </el-form-item>
                       <el-form-item label="积雨：">
                           <el-input class='formClass' v-model="formData.integralRain">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>mm</span>
                               </template>
                           </el-input>
                       </el-form-item>
                       <el-form-item label="年平均降雨：">
                           <el-input class='formClass' v-model="formData.yearAvgRain">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>mm</span>
                               </template>
                           </el-input>
                       </el-form-item>
                   </el-col>
               </el-row>
           </div>
           <!-- envInfo end -->

           <!-- soilInfo start -->
           <div class='pane' v-show='showInputs'>
               <el-row :gutter="20">
                   <h2 class='title'>土壤信息</h2>
                   <el-col :span='8'>
                       <el-form-item label="土壤类型：">
                           <el-input class='formClass' v-model="formData.soilType"></el-input>
                       </el-form-item>
                       <el-form-item label="EC值：">
                           <el-input type='number' class='formClass' v-model="formData.eC">
                               <template slot='suffix'>
                                   <span style='color: black;margin-right: 5px'>天</span>
                               </template>
                           </el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span='8'>
                       <el-form-item label="土壤厚度：">
                           <el-input class='formClass' v-model="formData.soilThickness"></el-input>
                       </el-form-item>
                       <el-form-item label="PH值：">
                           <el-input type='number' class='formClass' v-model="formData.pH"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span='8'>
                       <el-form-item label="有机质含量：">
                           <el-input class='formClass' v-model="formData.organicMatter"></el-input>
                       </el-form-item>
                   </el-col>

                   <el-col :span='12'>
                       <el-form-item label="土壤检测报告：">
                           <myUpload :max-num='1' :fileList='fileListBaseCheckPhoto' :files='formData.soilReportImg' @getUpload='getImgUrl($event,"soilReportImg")'></myUpload>
                       </el-form-item>
                   </el-col>
               </el-row>
           </div>
           <!-- soilInfo end -->
       </el-form>
    </div>
</template>
<script>
import area from "@/request/area.json"
import {getBaseList} from  '@/request/api'
import myUpload from '@/components/common/myUpload.vue';
export default {
    name: 'editBase',
    components:{
        myUpload,
    },
    data() {
        return {
            showInputs:false,
            base:[],
            addressOptions:[],
            fileListBasePhoto:[],
            fileListBaseLicense:[],
            fileListBaseCheckPhoto:[],
            baseName:[],//基地名称
            formData:{
                num:'',//基地编号
                principalName:'',//基地负责人
                member:'',//基地成员
                area:'',//面积
                address:[],//地区3级
                detailAddress:'',//详细地址
                soilImg:[],//基地照片
                certificateImg:[],//基地资料
                altitude:0,//海拔
                dryPeriod:'',//无霜期
                yearAvgTemp:'',//平均气温
                longitude:'',//经度
                integralTemp:'',//积温
                yearAvgSunshine:'',//年平均日照
                latitude:'',//纬度
                integralRain:'',//积雨
                yearAvgRain:'',//年平均降雨
                soilType:'',//土壤类型
                soilThickness:'',//土壤厚度
                eC:'',//EC值
                pH:'',//PH值
                organicMatter:'',//有机质含量
                soilReportImg:[],//土壤检测报告
            },
            rules:{
                num:[
                    {required: true, message: '请输入基地编号', trigger: 'blur'},
                ],
                principalName:[
                    {required: true, message: '请输入基地负责人', trigger: 'blur'},
                ],
                member:[
                    {required: true, message: '请输入基地成员', trigger: 'blur'},
                ],
                area:[
                    {required: true, message: '请输入面积', trigger: 'blur'},
                ],
                address:[
                    {required: true, message: '请输入地区', trigger: 'blur'},
                ],
                detailAddress:[
                    {required: true, message: '请输入详细地址', trigger: 'blur'},
                ],

            },
        };
    },
    watch:{
        baseName(v){
            if(v){
               this.showInputs = true
            }else{
                this.showInputs = false
            }
        },
    },
    mounted() {
        this.handleAddress()
        this.selectBaseList()
    },
    methods:{
        getImgUrl(res,type){
            if(type == 'soilImg'){
                this.formData.soilImg = [
                    {
                        url:localStorage.getItem('requestUrl')+'file/show/'+res.res.data.fileName,
                        name:res.res.data.fileName
                    }
                ]
            }else if(type == 'certificateImg'){
                this.formData.certificateImg = [
                    {
                        url:localStorage.getItem('requestUrl')+'file/show/'+res.res.data.fileName,
                        name:res.res.data.fileName
                    }
                ]
            }else if(type == 'soilReportImg'){
                this.formData.soilReportImg = [
                    {
                        url:localStorage.getItem('requestUrl')+'file/show/'+res.res.data.fileName,
                        name:res.res.data.fileName
                    }
                ]
            }
        },
        async selectBaseList(){
            const res = await getBaseList()
            if(res.code == 200){
                this.base = res.data
            }
        },
        baseChange(value){
            this.formData = this.base.filter(item=>item.id == value)[0]
            console.log(this.formData);
            if(this.formData.address && typeof this.formData.address == 'string'){
                this.formData.address = JSON.parse(this.formData.address)
            }
            if(this.formData.soilImg && typeof this.formData.soilImg == 'string'){
                this.formData.soilImg = JSON.parse(this.formData.soilImg)
            }
            if(this.formData.certificateImg && typeof this.formData.certificateImg == 'string'){
                this.formData.certificateImg = JSON.parse(this.formData.certificateImg)
            }
            if(this.formData.soilReportImg && typeof this.formData.soilReportImg == 'string'){
                this.formData.soilReportImg = JSON.parse(this.formData.soilReportImg)
            }
            // //查询的基地数据存储图片的字段都是null导致上传器报错,全部拿出来判断为空置为空数组再赋值
            let {soilImg,certificateImg,soilReportImg} = this.formData
            soilImg = soilImg ? soilImg : []
            certificateImg = certificateImg ? certificateImg : []
            soilReportImg = soilReportImg ? soilReportImg : []
            this.formData.soilImg = soilImg
            this.formData.certificateImg = certificateImg
            this.formData.soilReportImg = soilReportImg
            //展示现有数据中的图片
            this.fileListBasePhoto = this.formData.soilImg
            this.fileListBaseLicense = this.formData.certificateImg
            this.fileListBaseCheckPhoto = this.formData.soilReportImg
        },
        handleAddress(){
           this.addressOptions = area;
        },
        handleChange(){
            console.log(this.formData.address)
        },
    }
};
</script>
<style lang='less' scoped>
.pane{
    padding: 20px;
}
.title{
    margin: 20px 0;
}
.formClass{
    width: 100%;
}
/deep/.el-input__inner:focus{
    border-color: #00a854 !important;
}
///deep/.el-input--small .el-input__inner{
//    border-radius: 50px;
//}

</style>
